<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的考拉</title>
    <!-- 设置小图标 -->
    <link rel="shortcut icon" href="./images/nike.jpg" type="image/x-icon">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/nav.css">
    <link rel="stylesheet" href="./css/top.css">
    <link rel="stylesheet" href="./css/main.css">

    <script src="./js/scrollTop.js"></script>
    <script src="./js/main.js"></script>
    <script src="./js/animation.js"></script>
    <script src="./js/banner.js"></script>
</head>

<body>
    <div id="nav">
        <!-- ad -->
        <div class="ad">
            <a href="#"><img src="./images/ad.jpg" alt=""></a>
        </div>
        <!-- 顶部导航 -->
        <div class="top-nav">
            <div class="wrap">
                <div class="tn-left">
                    <ul>
                        <li><span>考拉欢迎你!</span></li>
                        <li><a href="#">登录</a></li>
                        <li><a href="#">免费注册</a></li>
                        <li><a href="#">手机考拉</a></li>
                    </ul>
                </div>
                <div class="tn-right">
                    <ul>
                        <li><a href="#" class="daily">每日签到</a></li>
                        <li><a href="#" class="daily">我的订单</a></li>
                        <li class="pc"><a href="#" class="icon">
                            个人中心
                            <i></i>
                        </a></li>
                        <li><a href="#" class="icon">
                            客户服务
                            <i></i>
                        </a></li>
                        <li><a href="#" class="icon">
                            充值中心
                            <i></i>
                        </a></li>
                        <li><a href="#" class="icon">
                            消费者权益
                            <i></i>
                        </a></li>
                        <li><a href="#" class="icon">
                            更多视频内容
                            <i></i>
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- logo search cart -->
        <div class="func wrap">
            <a href="#" class="logo"><img src="./images/logo.png" alt=""></a>

            <div class="cart">
                <img src="./images/cart.png" alt="">
                <span>购物车</span>
            </div>
            <div class="search">
                <i></i>
                <input type="search" placeholder="面膜">
                <span class="sea-b"></span>
            </div>

        </div>
    </div>

    <div id="top">
        <!-- tababr -->
        <div class="tabbar">
            <div class="wrap">
                <div class="bar-left">
                    <div class="bar-border">
                        <div class="lineicon">
                            <i></i>
                            <i></i>
                            <i></i>
                        </div>
                        <span>所有分类</span>
                    </div>
                    <ul class="more-f">
                        <li>
                            <a href="#">
                                <img src="./images/bar-left.png" alt="">
                                <img class="active" src="./images/bar-left-hot.png" alt=""> 美容彩妆
                                <i>
                                    <svg t="1633913312009" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2407" width="16px" height="14px"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="2408" fill="#bfbfbf"></path></svg>
                                </i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/bar-left2.png" alt="">
                                <img class="active" src="./images/bar-left2-hot.png" alt="">母婴儿童
                                <i>
                                    <svg t="1633913312009" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2407" width="16px" height="14px"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="2408" fill="#bfbfbf"></path></svg>
                                </i>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="./images/bar-left.png" alt="">
                                <img class="active" src="./images/bar-left-hot.png" alt=""> 营养保健
                                <i>
                                    <svg t="1633913312009" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2407" width="16px" height="14px"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="2408" fill="#bfbfbf"></path></svg>
                                </i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/bar-left2.png" alt="">
                                <img class="active" src="./images/bar-left2-hot.png" alt="">数码家电
                                <i>
                                    <svg t="1633913312009" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2407" width="16px" height="14px"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="2408" fill="#bfbfbf"></path></svg>
                                </i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/bar-left.png" alt="">
                                <img class="active" src="./images/bar-left-hot.png" alt=""> 个护家清
                                <i>
                                    <svg t="1633913312009" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2407" width="16px" height="14px"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="2408" fill="#bfbfbf"></path></svg>
                                </i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/bar-left2.png" alt="">
                                <img class="active" src="./images/bar-left2-hot.png" alt="">服饰鞋靴
                                <i>
                                    <svg t="1633913312009" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2407" width="16px" height="14px"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="2408" fill="#bfbfbf"></path></svg>
                                </i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/bar-left.png" alt="">
                                <img class="active" src="./images/bar-left-hot.png" alt=""> 运动户外
                                <i>
                                    <svg t="1633913312009" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2407" width="16px" height="14px"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="2408" fill="#bfbfbf"></path></svg>
                                </i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/bar-left2.png" alt="">
                                <img class="active" src="./images/bar-left2-hot.png" alt="">手表配饰
                                <i>
                                    <svg t="1633913312009" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2407" width="16px" height="14px"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="2408" fill="#bfbfbf"></path></svg>
                                </i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/bar-left.png" alt="">
                                <img class="active" src="./images/bar-left-hot.png" alt=""> 轻奢
                                <i>
                                    <svg t="1633913312009" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2407" width="16px" height="14px"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="2408" fill="#bfbfbf"></path></svg>
                                </i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/bar-left2.png" alt="">
                                <img class="active" src="./images/bar-left2-hot.png" alt="">家居生活
                                <i>
                                    <svg t="1633913312009" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2407" width="16px" height="14px"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="2408" fill="#bfbfbf"></path></svg>
                                </i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/bar-left.png" alt="">
                                <img class="active" src="./images/bar-left-hot.png" alt=""> 环球美食
                                <i>
                                    <svg t="1633913312009" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2407" width="16px" height="14px"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="2408" fill="#bfbfbf"></path></svg>
                                </i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/bar-left2.png" alt="">
                                <img class="active" src="./images/bar-left2-hot.png" alt="">宠物生活
                                <i>
                                    <svg t="1633913312009" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2407" width="16px" height="14px"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="2408" fill="#bfbfbf"></path></svg>
                                </i>
                            </a>
                        </li>

                    </ul>
                </div>
                <div class="bar-right">
                    <ul>
                        <li class="firstpage"><a href="#">首页</a></li>
                        <li><a href="#">海外直购</a></li>
                        <li><a class="active" href="#">考拉海购出品</a></li>
                        <li><a href="#">品质奶粉</a></li>
                        <li><a href="#">人气面膜</a></li>
                        <li><a href="#">充值</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="banner">
            <div class="wrap">
                <a href="javascript:void(0);">
                    <ul class="banner-sc">
                        <li>
                            <img class="focusimg" src="./images/banner.jpg" alt="">

                        </li>
                        <li>
                            <img src="./images/banner2.webp" alt="">

                        </li>
                        <li>

                            <img src="./images/banner3.jpg" alt="">
                        </li>
                    </ul>
                    <span class="control wrap">
                    <i class="prev"></i>
                    <i class="next"></i>
                </span>
                    <span class="dots wrap">
                    <span class="dot">
                        <!-- <i class="active"></i> -->
                    </span>
                    </span>
                </a>
                <div class="service">
                    <div class="blur"></div>
                    <ul class="wrap">
                        <li>
                            <a href="#">
                                <i></i> 考拉自营
                            </a>
                        </li>
                        <li>
                            <a href="#"><i></i>全球直采</a>
                        </li>
                        <li>

                            <a href="#"> <i></i>假一赔十</a>
                        </li>
                        <li>
                            <a href="#"> <i></i>售后无忧</a>
                        </li>
                        <li>
                            <a href="#"> <i></i>新用户下载APP，领10元无门槛券</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>


    <!-- 主要的内容  左右的固定盒子 -->
    <div id="main">
        <div class="left-fix"></div>
        <div class="right-fix">
            <span class="returnTop"><a href="#">回到顶部</a></span>
        </div>
        <!-- 运动户外1 -->
        <div class="product-out clear-fix" index="0">
            <div class="wrap">
                <div class="title">
                    <div class="title-left">
                        <h2>运动户外</h2>
                        <ul>
                            <li>热搜词：</li>
                            <li><a class="active" href="#">阿迪达斯</a></li>
                            <li><a href="#">耐克</a></li>
                            <li><a class="active" href="#">斯凯奇</a></li>
                            <li><a class="active" href="#">安德玛</a></li>
                        </ul>
                    </div>
                    <div class="title-right">
                        <a href="#">
                        更多好货<i>
                                <svg t="1633913312009" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2407" width="16px" height="14px"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="2408" fill="#bfbfbf"></path></svg>
                            </i>
                        </a>
                    </div>
                </div>
                <div class="impor-p">
                    <div class="impor-left">
                        <ul>
                            <li>
                                <a href="#">运动潮鞋</a>
                            </li>
                            <li>
                                <a href="#">防晒</a>
                            </li>
                            <li>
                                <a href="#">运动服饰</a>
                            </li>
                            <li>
                                <a href="#">瑜伽游泳</a>
                            </li>
                            <li>
                                <a href="#">运动鞋</a>
                            </li>
                            <li>
                                <a href="#">户外鞋靴</a>
                            </li>
                        </ul>
                    </div>
                    <ul class="impor-center">
                        <li>
                            <!-- 用定位做 之后opacity:0; -->
                            <a class="ica-top" href="">+关注</a>
                            <img src="./images/impor-center.jpg" alt="">
                            <span class="old-span">法西兰的浪漫玫瑰</span>
                            <span class="new-span">3594137人关注该品牌</span>
                            <a class="ica-bottom" href="#">进入品牌</a>
                        </li>
                        <li>
                            <a class="ica-top" href="">+关注</a>
                            <img src="./images/impor-center.jpg" alt="">
                            <span class="old-span">法西兰的浪漫玫瑰</span>
                            <span class="new-span">3594137人关注该品牌</span>
                            <a class="ica-bottom" href="#">进入品牌</a>
                        </li>
                        <li>
                            <a class="ica-top" href="">+关注</a>
                            <img src="./images/impor-center.jpg" alt="">
                            <span class="old-span">法西兰的浪漫玫瑰</span>
                            <span class="new-span">3594137人关注该品牌</span>
                            <a class="ica-bottom" href="#">进入品牌</a>
                        </li>
                        <li>
                            <a class="ica-top" href="">+关注</a>
                            <img src="./images/impor-center.jpg" alt="">
                            <span class="old-span">法西兰的浪漫玫瑰</span>
                            <span class="new-span">3594137人关注该品牌</span>
                            <a class="ica-bottom" href="#">进入品牌</a>
                        </li>
                    </ul>
                    <div class="impor-right"></div>
                </div>

            </div>
        </div>
        <!-- 运动户外2 -->
        <div class="product-out clear-fix" index="1">
            <div class="wrap">
                <div class="title">
                    <div class="title-left">
                        <h2>运动户外</h2>
                        <ul>
                            <li>热搜词：</li>
                            <li><a class="active" href="#">阿迪达斯</a></li>
                            <li><a href="#">耐克</a></li>
                            <li><a class="active" href="#">斯凯奇</a></li>
                            <li><a class="active" href="#">安德玛</a></li>
                        </ul>
                    </div>
                    <div class="title-right">
                        <a href="#">
                        更多好货<i>
                                <svg t="1633913312009" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2407" width="16px" height="14px"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="2408" fill="#bfbfbf"></path></svg>
                            </i>
                        </a>
                    </div>
                </div>
                <div class="impor-p">
                    <div class="impor-left">
                        <ul>
                            <li>
                                <a href="#">运动潮鞋</a>
                            </li>
                            <li>
                                <a href="#">防晒</a>
                            </li>
                            <li>
                                <a href="#">运动服饰</a>
                            </li>
                            <li>
                                <a href="#">瑜伽游泳</a>
                            </li>
                            <li>
                                <a href="#">运动鞋</a>
                            </li>
                            <li>
                                <a href="#">户外鞋靴</a>
                            </li>
                        </ul>
                    </div>
                    <ul class="impor-center">
                        <li>
                            <!-- 用定位做 之后opacity:0; -->
                            <a class="ica-top" href="">+关注</a>
                            <img src="./images/impor-center.jpg" alt="">
                            <span class="old-span">法西兰的浪漫玫瑰</span>
                            <span class="new-span">3594137人关注该品牌</span>
                            <a class="ica-bottom" href="#">进入品牌</a>
                        </li>
                        <li>
                            <a class="ica-top" href="">+关注</a>
                            <img src="./images/impor-center.jpg" alt="">
                            <span class="old-span">法西兰的浪漫玫瑰</span>
                            <span class="new-span">3594137人关注该品牌</span>
                            <a class="ica-bottom" href="#">进入品牌</a>
                        </li>
                        <li>
                            <a class="ica-top" href="">+关注</a>
                            <img src="./images/impor-center.jpg" alt="">
                            <span class="old-span">法西兰的浪漫玫瑰</span>
                            <span class="new-span">3594137人关注该品牌</span>
                            <a class="ica-bottom" href="#">进入品牌</a>
                        </li>
                        <li>
                            <a class="ica-top" href="">+关注</a>
                            <img src="./images/impor-center.jpg" alt="">
                            <span class="old-span">法西兰的浪漫玫瑰</span>
                            <span class="new-span">3594137人关注该品牌</span>
                            <a class="ica-bottom" href="#">进入品牌</a>
                        </li>
                    </ul>
                    <div class="impor-right"></div>
                </div>

            </div>
        </div>
        <!-- 热卖品牌 -->
        <div class="rebrand">
            <div class="wrap">
                <div class="title">热卖品牌</div>
                <div class="brands">
                    <div class="item">
                        <img src="./images/nike.jpg" alt="">
                        <div class="love">
                            <a href="#">
                                <img src="./images/bar-left-hot.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./images/nike.jpg" alt="">
                        <div class="love">
                            <a href="#">
                                <img src="./images/bar-left-hot.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./images/nike.jpg" alt="">
                        <div class="love">
                            <a href="#">
                                <img src="./images/bar-left-hot.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./images/nike.jpg" alt="">
                        <div class="love">
                            <a href="#">
                                <img src="./images/bar-left-hot.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./images/nike.jpg" alt="">
                        <div class="love">
                            <a href="#">
                                <img src="./images/bar-left-hot.png" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>






    <div id="footer"></div>
</body>

</html>